import { storeAll } from '@/store'
import { List } from 'antd'
import { observer } from 'mobx-react-lite'
import React from 'react'
import { Link } from 'react-router-dom'
import './style.scss'

const list1 = [
	{
		link: '/homepage/userManager',
		label: '用户管理'
	},
	{
		link: '/homepage/parkingLot',
		label: '车位管理'
	},
	{
		link: '/homepage/vehicleMaintenance',
		label: '车辆维修管理'
	},
	{
		link: '/homepage/fixedParkingSpace',
		label: '固定车位管理'
	},
	{
		link: '/homepage/parkingType',
		label: '车位类型管理'
	},
	{
		link: '/homepage/notes',
		label: '车辆出入记录'
	},
	{
		link: '/homepage/cars',
		label: '车辆管理'
	},
	{
		link: '/homepage/maintenancer',
		label: '维修人员管理'
	},
	{
		link: '/homepage/statistics',
		label: '数据统计'
	}
]
const list2 = [
	{
		link: '/homepage/admin',
		label: '管理员管理'
	},
	{
		link: '/homepage/allStatistics',
		label: '数据统计'
	}
]
const Introduce: React.FC = () => {
	const { adminStore: { adminInfo: { role } } } = storeAll
	return <div className='welcome'>
		<div className="introduceWrap">
			<span>{role === 0 ? '此管理系统为管理员提供丰富全面的管理手段，对自己管理的楼栋进行全面的管理' : '超级管理员可管理楼栋，其他管理员，以及查看所有楼栋的数据统计'}</span>
			<List
				style={{ margin: '20px auto', width: '50%' }}
				bordered
				dataSource={role === 0 ? list1 : list2}
				renderItem={(item) => (
					<List.Item>
						<Link to={item.link}>{item.label}</Link>
					</List.Item>
				)}
			/>
		</div>
	</div>
}

export default observer(Introduce)